<template>
	<view class="login-container">
		<!-- 动态渐变背景 -->
		<view class="background-gradient">
			<view class="gradient-orb orb-1"></view>
			<view class="gradient-orb orb-2"></view>
			<view class="gradient-orb orb-3"></view>
		</view>
		
		<!-- 几何装饰元素 -->
		<view class="geometric-shapes">
			<view class="shape shape-1"></view>
			<view class="shape shape-2"></view>
			<view class="shape shape-3"></view>
			<view class="shape shape-4"></view>
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 品牌标识区域 -->
			<view class="brand-section">
				<view class="brand-logo">
					<view class="logo-icon">
						<text class="logo-text">SG3L</text>
					</view>
				</view>
				<view class="brand-info">
					<text class="brand-title">SG3L AI</text>
					<text class="brand-subtitle">智能问答系统</text>
				</view>
			</view>
			
			<!-- 登录卡片 -->
			<view class="login-card">
				<view class="card-header">
					<text class="welcome-text">欢迎回来</text>
					<text class="sub-text">请登录您的账户</text>
				</view>
				
				<view class="form-container">
					<!-- 用户名输入 -->
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="icon">👤</text>
						</view>
						<input 
							class="form-input" 
							v-model="formData.username" 
							placeholder="用户名 / 邮箱 / 手机号"
							type="text"
							:disabled="isLoading"
							@focus="onInputFocus"
							@blur="onInputBlur"
							@input="onUsernameInput"
							confirm-type="next"
						/>
					</view>
					
					<!-- 密码输入 -->
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="icon">🔐</text>
						</view>
						<input 
							class="form-input" 
							v-model="formData.password" 
							placeholder="请输入密码"
							:type="showPassword ? 'text' : 'password'"
							:disabled="isLoading"
							@focus="onInputFocus"
							@blur="onInputBlur"
							@input="onPasswordInput"
							confirm-type="done"
						/>
						<view class="input-action" @click="togglePassword">
							<text class="action-icon">{{ showPassword ? '🙈' : '👁️' }}</text>
						</view>
					</view>
					
					<!-- 选项区域 -->
					<view class="options-row">
						<view class="checkbox-item" @click="toggleRemember">
							<view class="custom-checkbox" :class="{ checked: rememberMe }">
								<text class="check-mark" v-if="rememberMe">✓</text>
							</view>
							<text class="checkbox-label">记住我</text>
						</view>
						<text class="forgot-link" @click="forgotPassword">忘记密码？</text>
					</view>
					
					<!-- 登录按钮 -->
					<button 
						class="login-btn" 
						:class="{ 
							disabled: !canLogin || isLoading,
							loading: isLoading 
						}"
						:disabled="!canLogin || isLoading"
						@click="handleLogin"
					>
						<view class="btn-content">
							<view v-if="isLoading" class="loading-spinner"></view>
							<text class="btn-text">{{ isLoading ? '登录中...' : '立即登录' }}</text>
						</view>
					</button>
				
					<!-- 注册提示 -->
					<view class="register-prompt">
						<text class="prompt-text">还没有账号？</text>
						<text class="register-link" @click="goToRegister">立即注册</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { authApi } from '@/api/auth';
	
	// 响应式数据
	const formData = reactive({
		username: '',
		password: ''
	});
	
	const showPassword = ref(false);
	const rememberMe = ref(false);
	const isLoading = ref(false);
	
	// 计算属性
	const canLogin = computed(() => {
		return formData.username.trim() && formData.password.trim();
	});
	
	// 方法
	const togglePassword = () => {
		showPassword.value = !showPassword.value;
	};
	
	const toggleRemember = () => {
		rememberMe.value = !rememberMe.value;
	};
	
	const onInputFocus = (e) => {
		// 输入框获得焦点时的处理
		console.log('输入框获得焦点');
	};
	
	const onInputBlur = (e) => {
		// 输入框失去焦点时的处理
		console.log('输入框失去焦点');
	};
	
	const onUsernameInput = (e) => {
		formData.username = e.detail.value;
	};
	
	const onPasswordInput = (e) => {
		formData.password = e.detail.value;
	};
	
	const handleLogin = async () => {
		if (!canLogin.value || isLoading.value) return;
		
		isLoading.value = true;
		
		try {
			// 普通登录流程
			await handleNormalLogin();
		} catch (error) {
			console.error('登录失败:', error);
			uni.showToast({
				title: error.message || '登录失败',
				icon: 'error'
			});
		} finally {
			isLoading.value = false;
		}
	};
	
	// 普通登录
	const handleNormalLogin = async () => {
		// 表单验证
		if (!validateForm()) {
			return;
		}
		
		try {
			// 调用真实的登录API
			const result = await authApi.login({
				username: formData.username,
				password: formData.password
			});
			
			// 保存登录信息
			const token = result.token || result.accessToken;
			const userInfo = result.user || result;
			
			uni.setStorageSync('token', token);
			uni.setStorageSync('userInfo', userInfo);
			
			// 保存记住密码
			if (rememberMe.value) {
				uni.setStorageSync('rememberedAccount', {
					username: formData.username,
					password: formData.password
				});
			} else {
				uni.removeStorageSync('rememberedAccount');
			}
			
			navigateToIndex();
		} catch (error) {
			console.error('登录失败:', error);
			
			let errorMessage = '登录失败';
			if (error.status === 401) {
				errorMessage = '用户名或密码错误';
			} else if (error.status === 404) {
				errorMessage = '用户不存在';
			} else if (error.message) {
				errorMessage = error.message;
			}
			
			throw new Error(errorMessage);
		}
	};
	
	// 跳转到首页
	const navigateToIndex = () => {
		uni.reLaunch({
			url: '/pages/index/index',
			success: () => {
				console.log('登录成功，跳转到首页');
			},
			fail: (err) => {
				console.error('跳转失败:', err);
				// 如果reLaunch失败，尝试navigateTo
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		});
	};
	
	const validateForm = () => {
		if (!formData.username.trim()) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'error'
			});
			console.log('请输入用户名');
			return false;
		}
		
		if (!formData.password.trim()) {
			uni.showToast({
				title: '请输入密码',
				icon: 'error'
			});
			console.log('请输入密码');
			return false;
		}
		
		if (formData.password.length < 6) {
			uni.showToast({
				title: '密码至少6位',
				icon: 'error'
			});
			console.log('密码至少6位');
			return false;
		}
		
		return true;
	};
	
	const loadRememberedAccount = () => {
		const remembered = uni.getStorageSync('rememberedAccount');
		if (remembered) {
			formData.username = remembered.username;
			formData.password = remembered.password;
			rememberMe.value = true;
		}
	};
	
	const forgotPassword = () => {
		uni.navigateTo({
			url: '/pages/forgot-password/forgot-password'
		});
	};
	
	const goToRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		});
	};
	
	// 生命周期
	onLoad(() => {
		loadRememberedAccount();
	});
	
	onMounted(() => {
		console.log('Login页面已挂载');
	});
</script>

<style scoped>
	.login-container {
		min-height: 100vh;
		position: relative;
		overflow: hidden;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	.background-gradient {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.gradient-orb {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(20rpx);
		animation: float 8s ease-in-out infinite;
	}
	
	.orb-1 {
		width: 300rpx;
		height: 300rpx;
		top: 10%;
		left: -100rpx;
		animation-delay: 0s;
	}
	
	.orb-2 {
		width: 200rpx;
		height: 200rpx;
		top: 60%;
		right: -50rpx;
		animation-delay: 2s;
	}
	
	.orb-3 {
		width: 150rpx;
		height: 150rpx;
		bottom: 20%;
		left: 50%;
		animation-delay: 4s;
	}
	
	.geometric-shapes {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.shape {
		position: absolute;
		background: rgba(255, 255, 255, 0.05);
		border: 1rpx solid rgba(255, 255, 255, 0.1);
	}
	
	.shape-1 {
		width: 100rpx;
		height: 100rpx;
		top: 15%;
		right: 20%;
		transform: rotate(45deg);
		animation: rotate 10s linear infinite;
	}
	
	.shape-2 {
		width: 80rpx;
		height: 80rpx;
		bottom: 30%;
		left: 15%;
		border-radius: 50%;
		animation: pulse 6s ease-in-out infinite;
	}
	
	.shape-3 {
		width: 60rpx;
		height: 60rpx;
		top: 40%;
		left: 10%;
		clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		animation: bounce 8s ease-in-out infinite;
	}
	
	.shape-4 {
		width: 120rpx;
		height: 40rpx;
		bottom: 15%;
		right: 25%;
		border-radius: 20rpx;
		animation: slide 12s ease-in-out infinite;
	}
	
	.main-content {
		position: relative;
		z-index: 5;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	.brand-section {
		text-align: center;
		margin-bottom: 60rpx;
		margin-top: 40rpx;
	}
	
	.brand-logo {
		margin-bottom: 40rpx;
	}
	
	.logo-icon {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 15rpx 40rpx rgba(79, 172, 254, 0.3);
		position: relative;
		overflow: hidden;
	}
	
	.logo-icon::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		animation: shine 3s ease-in-out infinite;
	}
	
	.logo-text {
		color: white;
		font-size: 48rpx;
		font-weight: 900;
		text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}
	
	.brand-info {
		text-align: center;
	}
	
	.brand-title {
		display: block;
		color: white;
		font-size: 48rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
		text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}
	
	.brand-subtitle {
		display: block;
		color: rgba(255, 255, 255, 0.8);
		font-size: 28rpx;
		font-weight: 400;
	}
	
	.login-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 30rpx;
		padding: 40rpx 35rpx;
		backdrop-filter: blur(20rpx);
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		margin-top: 20rpx;
	}
	
	.card-header {
		text-align: center;
		margin-bottom: 35rpx;
	}
	
	.welcome-text {
		display: block;
		font-size: 44rpx;
		font-weight: 700;
		color: #2c3e50;
		margin-bottom: 15rpx;
	}
	
	.sub-text {
		display: block;
		font-size: 28rpx;
		color: #7f8c8d;
	}
	
	.form-container {
		flex: 1;
	}
	
	.input-wrapper {
		position: relative;
		margin-bottom: 25rpx;
		background: #f8f9fa;
		border-radius: 20rpx;
		border: 2rpx solid #e9ecef;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		padding: 0 25rpx;
		pointer-events: auto;
		min-height: 100rpx;
		box-sizing: border-box;
	}
	
	.input-wrapper:focus-within {
		border-color: #667eea;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
		background: white;
	}
	
	.input-icon {
		margin-right: 20rpx;
	}
	
	.icon {
		font-size: 32rpx;
		color: #6c757d;
	}
	
	.form-input {
		flex: 1;
		border: none !important;
		outline: none !important;
		background: transparent !important;
		font-size: 30rpx;
		color: #2c3e50;
		padding: 28rpx 0;
		cursor: text;
		user-select: text;
		-webkit-user-select: text;
		pointer-events: auto;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		line-height: normal;
	}
	
	.form-input::placeholder {
		color: #adb5bd;
	}
	
	.input-action {
		padding: 10rpx;
		cursor: pointer;
	}
	
	.action-icon {
		font-size: 32rpx;
		color: #6c757d;
	}
	
	.options-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.checkbox-item {
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	
	.custom-checkbox {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #dee2e6;
		border-radius: 8rpx;
		margin-right: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		background: white;
	}
	
	.custom-checkbox.checked {
		background: #667eea;
		border-color: #667eea;
	}
	
	.check-mark {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.checkbox-label {
		font-size: 28rpx;
		color: #495057;
	}
	
	.forgot-link {
		font-size: 28rpx;
		color: #667eea;
		text-decoration: underline;
		cursor: pointer;
	}
	
	.login-btn {
		width: 100%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border: none;
		border-radius: 20rpx;
		padding: 25rpx 0;
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		box-shadow: 0 10rpx 25rpx rgba(102, 126, 234, 0.3);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
	}
	
	.login-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}
	
	.login-btn:not(.disabled):active {
		transform: translateY(2rpx);
		box-shadow: 0 10rpx 25rpx rgba(102, 126, 234, 0.3);
	}
	
	.login-btn:not(.disabled):active::before {
		left: 100%;
	}
	
	.login-btn.disabled {
		opacity: 0.6;
		transform: none;
	}
	
	.login-btn.loading {
		background: linear-gradient(135deg, #a8a8a8 0%, #8a8a8a 100%);
	}
	
	.quick-login-btn {
		width: 100%;
		background: linear-gradient(135deg, #1aad19 0%, #26b726 100%);
		border: none;
		border-radius: 20rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
		font-weight: 600;
		color: white;
		box-shadow: 0 10rpx 25rpx rgba(26, 173, 25, 0.3);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	
	.quick-login-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 8rpx 20rpx rgba(26, 173, 25, 0.3);
	}
	
	.btn-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.loading-spinner {
		width: 32rpx;
		height: 32rpx;
		border: 3rpx solid rgba(255, 255, 255, 0.3);
		border-top: 3rpx solid white;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-right: 15rpx;
	}
	
	.divider-section {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	.divider-line {
		flex: 1;
		height: 1rpx;
		background: #e9ecef;
	}
	
	.divider-text {
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #adb5bd;
	}
	
	.register-prompt {
		text-align: center;
		margin-top: auto;
	}
	
	.prompt-text {
		font-size: 28rpx;
		color: #6c757d;
		margin-right: 10rpx;
	}
	
	.register-link {
		font-size: 28rpx;
		color: #667eea;
		font-weight: 600;
		text-decoration: underline;
		cursor: pointer;
	}
	
	@keyframes float {
		0%, 100% { transform: translateY(0) rotate(0deg); }
		50% { transform: translateY(-30rpx) rotate(180deg); }
	}
	
	@keyframes rotate {
		from { transform: rotate(45deg); }
		to { transform: rotate(405deg); }
	}
	
	@keyframes pulse {
		0%, 100% { transform: scale(1); opacity: 0.7; }
		50% { transform: scale(1.1); opacity: 1; }
	}
	
	@keyframes bounce {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-20rpx); }
	}
	
	@keyframes slide {
		0%, 100% { transform: translateX(0); }
		50% { transform: translateX(30rpx); }
	}
	
	@keyframes shine {
		0% { transform: rotate(45deg) translateX(-200%); }
		50% { transform: rotate(45deg) translateX(200%); }
		100% { transform: rotate(45deg) translateX(200%); }
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>